<?xml version="1.0" encoding="UTF-8" ?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:m="http://code.google.com/p/gmaps4jsf/"
	template="/WEB-INF/templates/general.xhtml">

	<style>
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#map {
	height: 100%;
}
</style>
	<ui:define name="content">ffffgf

		<h1>Cuenta de: #{user.userName}</h1>

		<!-- Nueva inmersion-->

		<h:form id="form">


			<p:outputLabel for="popup" value="Fecha:" />
			<p:calendar id="popup" value="#{inmersion.inmer_date}" />

			<p:dialog modal="true" resizable="false" header="Values"
				widgetVar="dlg" showEffect="fold">
				<p:panelGrid id="display" columns="2" columnClasses="label,value">
				
					<h:outputText value="Fecha de salida:" />
					<h:outputText value="#{calendarView.date2}">
						<f:convertDateTime pattern="MM/dd/yyyy" />
					</h:outputText>
				</p:panelGrid>
			</p:dialog>
			
			<p:inputText id="coefPrev" value="#{inmersion.coef_prev}"
				required="true" label="Coeficiente previo"
				title="Introduce un coeficiente!">
			</p:inputText>
			<p:inputText id="coefSalida" value="#{inmersion.coef_salida}"
				required="true" label="Coeficiente de salida"
				title="Introduce un coeficiente de salida!">
			</p:inputText>
			<p:inputText id="profundiad" value="#{inmersion.profundidad}"
				required="true" label="Profundidad"
				title="Introduce la profundidad!">
			</p:inputText>			
	
			<p:commandButton id="submitButton" action="saveNewInmersion"
				icon="ui-icon-check" value="Guardar nueva entrada"/>
		</h:form>
		<!-- Mapa -->
		<p:growl id="messages" showDetail="true" />

		<p:gmap id="gmap" center="36.689620324707136,-4.4020843505859375" zoom="13" type="TERRAIN"
			model="#{addMarkersView.emptyModel}"
			onPointClick="handlePointClick(event);" widgetVar="map" />

		<h:form prependId="false">
			<h:inputHidden id="lat" value="#{addMarkersView.lat}" />
			<h:inputHidden id="lng" value="#{addMarkersView.lng}" />
			<!-- Actualizar el bean -->

			<p:remoteCommand name="actualizarMapaPartialTrigger" action="#{addMarkersView.addMarker}"/>
		</h:form>

		<script type="text/javascript">
			var currentMarker = null;

			function handlePointClick(event) {
				if (currentMarker === null) {
					document.getElementById('lat').value = event.latLng.lat();
					document.getElementById('lng').value = event.latLng.lng();

					currentMarker = new google.maps.Marker({
						position : new google.maps.LatLng(event.latLng.lat(),
								event.latLng.lng())
					});

					PF('map').addOverlay(currentMarker);

				} else {
					//Ya hay un marcador, mover a la nueva posicion
					var latlng = new google.maps.LatLng(event.latLng.lat(),
							event.latLng.lng());
					currentMarker.setPosition(latlng);
					//currentMarker.setMap(null);
					//currentMarker = null;

				}
				actualizarMapaPartialTrigger();
			}
		</script>
		<!-- Fin mapa -->
	</ui:define>

</ui:composition>